<template>
    <f7-popup id="editComment" :opened="editCommentState" @popup:closed="closeEditComment">
        <f7-view navbar-fixed>
            <f7-pages>
                <f7-page>
                    <f7-navbar>
                        <f7-nav-left sliding>
                            <f7-link icon-fa="close" close-popup></f7-link>
                        </f7-nav-left>
                        <f7-nav-center>发布评论</f7-nav-center>
                        <f7-nav-right>
                            <f7-link href="/news/commentList">发布</f7-link>
                        </f7-nav-right>
                    </f7-navbar>
                    <div class="main">
                        <div class="edit-comment-common">
                            <f7-list class="select-role" :class="{'on': toAddRole}">
                                <f7-list-item link="javascript:;" class="guide" @click="addRole">
                                    <f7-icon fa="user-secret" class="icon-role"></f7-icon>
                                    角色扮演
                                </f7-list-item>
                                <f7-list-item>
                                    <f7-link icon-fa="chevron-left" class="btn-back" @click="backRole"></f7-link>
                                    <f7-link icon-fa="plus-square-o" class="btn-add" href="/news/avatar"></f7-link>
                                    <f7-input type="text" placeholder="角色名" />&ensp;说：
                                </f7-list-item>
                            </f7-list>
                            <f7-list class="comment-box">
                                <f7-list-item>
                                    <f7-input type="textarea" placeholder="请输入评论内容"></f7-input>
                                    <span class="char-limit">你还可输入150字</span>
                                </f7-list-item>
                            </f7-list>
                        </div>
                        <div class="share-to-circle">
                            <p>推送给谁看</p>
                            <ul>
                                <li>
                                    <f7-button round fill class="on">所有好友</f7-button>
                                </li>
                                <li>
                                    <f7-button round fill>高中圈</f7-button>
                                </li>
                                <li>
                                    <f7-button round fill>专业奶爸圈</f7-button>
                                </li>
                                <li>
                                    <f7-button round fill>不可告人圈</f7-button>
                                </li>
                                <li>
                                    <f7-button round fill>不推送给好友</f7-button>
                                </li>
                                <li>
                                    <f7-button round fill @click="addCircle"><f7-icon fa="plus-circle"></f7-icon> 添加圈子</f7-button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </f7-page>
            </f7-pages>
        </f7-view>
    </f7-popup>
</template>

<style lang="scss">
    #editComment {
        .share-to-circle {
            padding: 5px;
            background: #ddd;

            p{
                margin: 10px 0 10px 5px;
                font-weight: bold;
            }
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                toAddRole: false // 角色扮演点击切换状态判断
            }
        },
        props: ['editCommentState'],
        methods: {
            closeEditComment() {
                this.$emit('closeEditComment')
            },
            /* 角色扮演 */
            addRole() {
                this.toAddRole = true
            },
            /* 返回角色扮演 */
            backRole() {
                this.toAddRole = false
            },
            /* 添加圈子 */
            addCircle() {
                this.$f7.prompt('', '创建圈子')
            }
        }
    }
</script>